一、插件介绍
作者感言:此插件的灵感以及UI均来自世界上最伟大的化妆师 – photoshop,例如,我们使用ctrl+R显示标尺,同时从标尺上面拖出一条参考线。标尺可以让我们测量距离,参考线可以用来对齐,或是网页格栅化,这些都是有着很实际的应用的。例如对齐,对齐可以说是页面排版几大最关键要素之一(其他诸 如对比,重复之类),有时候,我们页面写完了,可能几像素的对齐与否无法用肉眼判断,此时就可以借助于本文插件的参考线来一探究竟。
二、插件作者
张鑫旭,博客:http://www.zhangxinxu.com/
三:插件图片
四:插件参数
无
五:插件使用
js方法 | 功能 | 其他说明 |
---|---|---|
$.pageRuler(params) | 显示参考线,绑定与初始化主要事件 | 参数params可选,作用是批量创建参考线 |
$.lineToggle() | 显示与隐藏参考线 | 无参数,显示与隐藏来回切换,对应快捷键”;” |
$.pageRulerHide() | 隐藏整个标尺参考线内容 | 对应”Esc”快捷键 |
$.pageRulerToggle() | 标尺的显示与隐藏 | 对应于快捷键”R” |
六:插件JS下载及DEMO
官方链接:
http://www.zhangxinxu.com/wordpress/?p=1002
插件版本:
jquery.zxxPageRuler.1.1.js
官方JS下载:
http://www.zhangxinxu.com/study/js/jquery.zxxPageRuler.1.1.js
本站JS下载:
http://www.ijquery.cn/js/jquery.zxxPageRuler.1.1.js
官方DEMO:
例1、 http://www.ijquery.cn/study/demo/zxxPageRuler/demo/demo1.html
例2、 http://www.ijquery.cn/study/demo/zxxPageRuler/demo/demo2.html
例3、 http://www.ijquery.cn/study/demo/zxxPageRuler/demo/demo3.html
例4、 http://www.ijquery.cn/study/demo/zxxPageRuler/demo/demo4.html
官方DEMO下载:
http://www.ijquery.cn/study/demo/zxxPageRuler/zxxPageRuler.zip
七:使用教程
1、JS和CSS引用
[js]
<script type="text/javascript" src="http://www.ijquery.cn/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="http://www.ijquery.cn/study/demo/zxxPageRuler/js/jquery.zxxPageRuler.1.1.js"></script>
<link rel="stylesheet" href="http://www.ijquery.cn/study/demo/zxxPageRuler/css/ruler.css" type="text/css" />
[/js]
2、示例说明
此插件不必使用HTML即可得到效果,如下是参考的demo1.html的示例
a>demo1.html
直接引用JS和CSS,按R键就可以调用出标尺,直接拖拉就可以调用出参考线;
b>demo2.html
[js]
<script type="text/javascript">
$(function(){
$.pageRuler();
});
</script>
[/js]
如上,打开页面时即可以直接调用出标尺,如图:
c>demo3.html
打开页面时,直接调用出"标尺"以及“垂直方向上的300px,500px和700px"的参考线
[js]
<script type="text/javascript">
$(function(){
$.pageRuler({
v: ["300", "500px", 700]
});
});
</script>
[/js]
如下是像素的三种表示方法,都可以使用的。如图:
d>demo4.html
点击"显示/隐藏标尺"和点击"显示参考线"
点击"显示/隐藏标尺"
[html]<button id="visRuler">显示/隐藏标尺</button>[/html]
[js]
<script type="text/javascript">
$(function(){
$("#visRuler").click(function(){
$.pageRulerToggle();
});
});
</script>
[/js]
点击"显示参考线",当然可以使用 $.pageRulerToggle() 来显示隐藏参考线。
[html]<button id="visRefLine">显示指定的参考线</button>[/html]
[js]
<script type="text/javascript">
$(function(){
$("#visRefLine").click(function(){
$.pageRuler({
v: ["300", "500px", 700]
});
});
});
</script>
[/js]